<template>
  <view class="special-offers">
    <view class="title">
      <text>特价团</text>
      <text class="tag">爆款热抢中</text>
    </view>
    <scroll-view scroll-x class="offers-list">
      <view class="offer-item" v-for="(item, index) in products" :key="index">
        <image :src="item.logo" mode="aspectFill"></image>
        <view class="info">
          <text class="name">{{item.name}}</text>
          <view class="price">
            <text class="current">¥{{item.currentPrice}}</text>
            <text class="original">¥{{item.originalPrice}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import {useData} from "../../../common/useData";
const {modelData:products}=useData("/product/list",{size:21})


</script>

<style>
.special-offers {
  margin: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
}
.title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.title .tag {
  font-size: 24rpx;
  color: #ff6b6b;
  background: #fff0f0;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 12rpx;
}
.offers-list {
  white-space: nowrap;
}
.offer-item {
  display: inline-block;
  width: 300rpx;
  margin-right: 20rpx;
}
.offer-item image {
  width: 100%;
  height: 200rpx;
  border-radius: 8rpx;
}
.info {
  padding: 10rpx 0;
}
.name {
  font-size: 26rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: 1.4;
}
.price {
  margin-top: 10rpx;
}
.current {
  color: #ff6b6b;
  font-size: 32rpx;
  font-weight: bold;
}
.original {
  color: #999;
  font-size: 24rpx;
  text-decoration: line-through;
  margin-left: 10rpx;
}
</style>
